export default {
  data() {
    return {
      changeBig: false, //放大
      moving: false, //拖动
      vLeft: 0,
      vTop: 0,
      oldLeft: 0,
      oldTop: 0,
      vDiv: {},
    }
  },
  mounted() {
    this.vDiv = document.querySelector('#flipbook')
  },
  methods: {
    init() {
      this.moving = false
      this.vLeft = 0
      this.vTop = 0
      this.oldLeft = 0
      this.oldTop = 0
    },
    //鼠标按下
    handleMousedown(e) {
      if (!this.changeBig) return

      this.moving = true
      this.vLeft = e.pageX
      this.vTop = e.pageY
      e.preventDefault() // 阻止默认行为
      e.stopPropagation() // 阻止事件冒泡
    },
    //鼠标松开
    handleMouseup(e) {
      this.moving = false
      let lf = e.pageX - this.vLeft
      let rt = e.pageY - this.vTop
      this.oldLeft = this.oldLeft + lf
      this.oldTop = this.oldTop + rt
      e.preventDefault() // 阻止默认行为
      e.stopPropagation() // 阻止事件冒泡
    },
    //鼠标移动
    handleMouseMove(e) {
      if (!this.moving) return
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        let lf = e.pageX - this.vLeft + this.oldLeft
        let rt = e.pageY - this.vTop + this.oldTop
        this.vDiv.style.transform =
          'scale(1.5) translate(' + lf + 'px, ' + rt + 'px)'
        e.preventDefault() // 阻止默认行为
        e.stopPropagation() // 阻止事件冒泡
      }, 4)
    },
    handleMouseLeave(e) {},
    //放大
    handleBig() {
      this.init()
      this.changeBig = !this.changeBig
      if (this.changeBig) {
        this.vDiv.style.transform = 'scale(1.5)'
      } else {
        this.vDiv.style.transform = 'scale(1)'
      }
    },
  },
}
